import React, { Component, Suspense } from "react";
import { connect } from "dva";
import router from "umi/router";
import { formatMessage } from 'umi-plugin-react/locale';
import { List, Button, Icon, Card, Avatar, Form, Input, message, Select, Spin, Table, Modal, TreeSelect, Pagination, Menu } from "antd";

const { Option } = Select;
const { confirm } = Modal;

import { delFile, enabledFile, getRepostFile, getCancelPostFile, getFileCategoryTree, docMoveCategory, docBatchAsync, docBatchDelete } from '@/services/knowledgeFile';
import styles from "./index.less";
import Ellipsis from "@/components/Ellipsis";
import UserSession from "@/UserSession";
import { routerRedux } from "dva/router";
import ReferenceTemplate from '../leftTree/referenceTemplate';
import UploadFile from "../editFile/uploadFile";
import moment from "moment";
import pptImg from '@/assets/ppt.png';
import pdfImg from '@/assets/pdf.png';
import txtImg from '@/assets/txt.png';
import fileImg from '@/assets/file.png';
import wrodImg from '@/assets/wrod.png';
import updateAsync from "@/assets/homeImgV2/updateAsync.png";
import { MoreOption } from "@/utils/CommonComponent";
import tableDataCheck from "@/utils/isBackPrevPage";

class FileList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			page: 1,
			limit: 10,
			formInfo: null,
			selectedRowKeys: [],
			fileIdList: [],
			moveVisible: false,
			moveCategoryId: "",
			treeData: [],
			categoryLoading: false,
			addMenuList: [
				{
					key: 'markdown',
					name: formatMessage({id: 'knowledgeFile.fileList.menu.createMarkdown'})
				},
				{
					key: 'file',
					name: formatMessage({id: 'knowledgeFile.fileList.menu.createAttachment'})
				},
				{
					key: "import",
					name: formatMessage({id: 'knowledgeFile.fileList.menu.upload'})
				}
			],

			batchMenuList: [
				{
					key: 'sync',
					name: formatMessage({id: 'knowledgeFile.fileList.menu.batchSync'})
				},
				{
					key: 'move',
					name: formatMessage({id: 'knowledgeFile.fileList.menu.moveCategory'})
				},
				{
					key: 'delete',
					name: formatMessage({id: 'knowledgeFile.fileList.menu.batchDelete'})
				}
			],
		};

	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		};
	}

	setFormInfoToSearch = (obj) => {
		const { formInfo } = this.state;
		this.setState({ formInfo: formInfo ? { ...formInfo, ...obj } : obj, page: 1 }, () => {
			this.getFileInfoList()
		})
	}

	getFileInfoList = () => {
		const { page, limit, formInfo } = this.state;
		this.props.fetchGraphListByPage(page, limit, formInfo)
	}

	// 新增Markdown文档
	addMarkdownFile = (id) => {
		const { pathId, dispatch, fileCategoryId, fileCategoryPath, authInfo,isAdmin } = this.props;
		let pathname = isAdmin ? "/publicResource/documentLibrary/" + pathId + "/file/addMarkdown" :  "/documentLibrary/" + pathId + "/file/addMarkdown";
		let query = id ? { fileCategoryId, fileCategoryPath, id } : { fileCategoryId, fileCategoryPath };
		const optionDisabled = authInfo.authType == 2 || authInfo.authType == 3 || isAdmin;
		dispatch(routerRedux.push({ pathname, query: { ...query, optionDisabled } }));
	}

	// 新增附件文档
	addFile = (id) => {
		const { pathId, dispatch, fileCategoryId, fileCategoryPath, authInfo,isAdmin } = this.props;
		let pathname = isAdmin ? "/publicResource/documentLibrary/" + pathId + "/file/addFile" : "/documentLibrary/" + pathId + "/file/addFile";
		let query = id ? { fileCategoryId, fileCategoryPath, id } : { fileCategoryId, fileCategoryPath };
		const optionDisabled = authInfo.authType == 2 || authInfo.authType == 3 || isAdmin;
		dispatch(routerRedux.push({ pathname, query: { ...query, optionDisabled } }));
	}

	// 批量文档上传
	updateFile = () => {
		this.uploadFileRef.showModal('BATCH');
	}

	// 预览or查看
	addOrEdit = (fileId, item) => {
		if (item.docType == 5) {
			this.addMarkdownFile(fileId);
			return;
		};
		if (item.docType == 7) {
			this.addFile(fileId);
			return;
		};
		const { pathId, dispatch, fileCategoryId, authInfo,isAdmin } = this.props;
		let pathname = isAdmin ? "/publicResource/documentLibrary/" + pathId + "/file/preview" : "/documentLibrary/" + pathId + "/file/preview";
		const optionDisabled = authInfo.authType == 2 || authInfo.authType == 3 || isAdmin
		dispatch(routerRedux.push({
			pathname,
			query: { fileCategoryId, fileId, fileName: item.docName, fileUrl: item.docPath, previewPath: item.previewPath, docType: item.docType, optionDisabled },
		}));
	}

	// 删除
	delFile = id => {
		const { formInfo } = this.state;
		const that = this;

		confirm({
			title: formatMessage({id: 'knowledgeFile.fileList.modal.delete.title'}),
			content: formatMessage({id: 'knowledgeFile.fileList.modal.delete.content'}),
			okText: formatMessage({id: 'knowledgeFile.fileList.modal.confirm'}),
			cancelText: formatMessage({id: 'knowledgeFile.fileList.modal.cancel'}),
			onOk: async () => {
				let res = await delFile({ id });
				// console.log(res);
				if (res.code == 0) {
					message.info(res.msg);
					that.props.fetchGraphListByPage(1, 10, formInfo);
				}
			},
			onCancel() { },
		});
	}

	// 停启用
	fixStatus = async (id, item) => {
		let docStatus = item.docStatus == 0 ? '1' : '0';
		let res = await enabledFile({ id, docStatus });
		// console.log(res);
		if (res.code == 0) {
			message.info(res.msg);
			this.fenye(this.state.page);
		}
	}

	// 发布
	postStatus = async (id, item) => {
		const { page, formInfo } = this.state;
		let res = { code: -1, data: false, msg: '操作失败' };
		if (item.syncStatus == '0' || item.syncStatus == '5' || item.syncStatus == '6' || item.syncStatus == '4') {
			res = await getRepostFile({ docId: id });
		};
		if (item.syncStatus == '2') {
			res = await getCancelPostFile({ docId: id });
		};
		// console.log(res);
		if (res.code === 0) {
			message.info(res.msg);
			this.props.fetchGraphListByPage(page, 10, formInfo);
		}
	}

	reference = id => {
		const { fileIdList } = this.state;
		if (this.referenceTemplateRef) {
			this.referenceTemplateRef.init({ type: null, id: [...fileIdList] })
		}
	}

	fenye = (page) => {
		const { formInfo } = this.state;
		this.setState({ page }, () => {
			this.props.fetchGraphListByPage(page, 10, formInfo);
		})
	}

	openMoveModal = () => {
		const { selectedRowKeys } = this.state;
		if (!selectedRowKeys || selectedRowKeys.length == 0) {
												message.error(formatMessage({id: 'knowledgeFile.fileList.error.selectToMove'}))
			return false
		};
		this.setState({ moveVisible: true, categoryLoading: true }, async () => {
			const { pathId } = this.props;
			const res = await getFileCategoryTree({ libraryId: pathId })
			this.setState({ categoryLoading: false, treeData: res })
		})
	}

	cancelMoveModal = () => {
		this.setState({ moveVisible: false, moveCategoryId: "", categoryLoading: false })
	}

	renderTreeNodes(data) {
		return data.map((item) => {
			if (item.children) {
				return (
					<TreeSelect.TreeNode title={item.name} key={item.id} value={item.id} info={{ parentPath: item.parentPath }} disabled={item.parentPath === "/"}>
						{this.renderTreeNodes(item.children)}
					</TreeSelect.TreeNode>
				);
			};
			return (
				<TreeSelect.TreeNode title={item.name} key={item.id} value={item.id} info={{ parentPath: item.parentPath }} disabled={item.parentPath === "/"} />
			);
		});
	}

	changeCategoryId = (info) => {
		console.log(info);
		this.setState({ moveCategoryId: info })
	}

	doMove = async () => {
		const { moveCategoryId, selectedRowKeys } = this.state;
		if (moveCategoryId) {
			const res = await docMoveCategory({ docIds: selectedRowKeys, categoryId: moveCategoryId })
			message.info(res.message)
			this.cancelMoveModal()
			this.getFileInfoList()
		} else {
			message.error(formatMessage({id: 'knowledgeFile.fileList.error.selectCategory'}))
		}
	}

	resetSelectRowKeys = () => {
		this.setState({ selectedRowKeys: [], fileIdList: [] })
	}

	batchAsyncConfirm = () => {
		Modal.confirm({
			title: formatMessage({id: 'knowledgeFile.fileList.modal.batchSync.title'}),
			content: formatMessage({id: 'knowledgeFile.fileList.modal.batchSync.content'}),
			okText: formatMessage({id: 'knowledgeFile.fileList.modal.confirm'}),
			okType: "primary",
			cancelText: formatMessage({id: 'knowledgeFile.fileList.modal.cancel'}),
			onOk: () => {
				this.doAsync()
			}
		})
	}

	doAsync = async () => {
		const { selectedRowKeys } = this.state;
		const { fileCategoryId } = this.props;
		let obj = {}
		if (selectedRowKeys && selectedRowKeys.length > 0) {
			obj.idList = selectedRowKeys;
		} else {
			obj.categoryId = fileCategoryId;
		};
		const res = await docBatchAsync(obj);
		message.info(res.message);
		this.getFileInfoList();
	}

	moreMenuClick = e => {
		const { selectedRowKeys } = this.state;
		switch (e.key) {
			case 'markdown':
				this.addMarkdownFile()
				break;
			case 'file':
				this.addFile()
				break;
			case 'import':
				this.updateFile()
				break;
			case 'sync':
				this.batchAsyncConfirm()
				break;
			case 'move':
				this.openMoveModal()
				break;
			case 'delete':
				this.batchDeleteConfirm()
				break;
		}
	}

	renderFilter = (filterParam, menus, type) => (
		<div style={{ textAlign: 'center' }}>
			<Menu onClick={(e) => { filterParam.confirm(); this.setFormInfoToSearch({ [type]: e.key }) }}
				selectedKeys={this.state.formInfo && this.state.formInfo[type] != null ? [this.state.formInfo[type]] : []}>
				{menus.map(item => {
					return <Menu.Item key={item.key}>{item.name}</Menu.Item>
				})}
			</Menu>
			<Button style={{ margin: "8px" }} size="small" type="primary" ghost onClick={() => { filterParam.confirm(); this.setFormInfoToSearch({ [type]: null }) }}>
			  {formatMessage({id: 'knowledgeFile.fileList.button.reset'})}
			</Button>
		</div>
	)

			batchDeleteConfirm = () => {
			const { selectedRowKeys } = this.state;
			if (selectedRowKeys.length == 0) {
				message.error(formatMessage({id: 'knowledgeFile.fileList.modal.batchDelete.error'}))
				return false
			}

			Modal.confirm({
				title: formatMessage({id: 'knowledgeFile.fileList.modal.batchDelete.title'}),
				content: formatMessage({id: 'knowledgeFile.fileList.modal.batchDelete.content'}),
				okText: formatMessage({id: 'knowledgeFile.fileList.modal.confirm'}),
				cancelText: formatMessage({id: 'knowledgeFile.fileList.modal.cancel'}),
				okType: "danger",
				onOk: () => {
					this.doBatchDelete()
				}
			})
		}

	doBatchDelete = async () => {
		const { selectedRowKeys } = this.state;
		const { list, current } = this.props;
		const res = await docBatchDelete({ ids: selectedRowKeys })
		console.log(res);
		message.info(res.message)
		const newCurrent = tableDataCheck(list, current, selectedRowKeys)
		this.fenye(newCurrent)
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const { selectedRowKeys, moveVisible, treeData, categoryLoading, moveCategoryId, addMenuList, batchMenuList } = this.state;
		const { list, total, graphLoading, current, fileCategoryId, fileCategoryPath, fileCategoryParentId, authority, history, authInfo,isAdmin } = this.props;
		const rowSelection = {
			selectedRowKeys,
			onChange: (selectedRowKeys) => {
				this.setState({ selectedRowKeys, fileIdList: selectedRowKeys });
			},
		};
		let getImg = (key) => {
			let imgHtml = '';
			switch (key) {
				case '0':
					imgHtml = <img src={wrodImg} style={{ width: '24px' }} />;
					break;

				case '1':
					imgHtml = <img src={fileImg} style={{ width: '20px' }} />;
					break;

				case '2':
					imgHtml = <img src={pptImg} style={{ width: '24px' }} />;
					break;

				case '3':
					imgHtml = <img src={pdfImg} style={{ width: '24px' }} />;
					break;

				case '4':
					imgHtml = <img src={txtImg} style={{ width: '24px' }} />;
					break;

				case '5':
					imgHtml = <img src={fileImg} style={{ width: '20px' }} />;
					break;

				default:
					imgHtml = <img src={fileImg} style={{ width: '20px' }} />;
					break;
			};

			return imgHtml;
		};
		//authType：0管理员 1编辑人员 2查看人员 3没有身份
		//0 管理员可操作一切
		//1.身份为编辑人员 根据exportFlag 判断是否可导出
		//2.身份为查看人员 不能编辑
		//3.没有身份的人不能编辑
		const optionDisabled = authInfo.authType == 2 || authInfo.authType == 3 || isAdmin;

		const columns = [
			{
				key: "docTitle",
				align: "left",
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.docTitle'}),
				dataIndex: "docTitle",
				width: 200,
				render: (text, item) => {
					return (
						<div>
							{item.docType != 5 && item.syncStatus != '4' ? (
								<span>{text}</span>
							) : (
								<span style={{ cursor: "pointer" }} onClick={() => this.addOrEdit(item.id, item)}>{text}</span>
							)}
						</div>
					)
				}
			},
			{
				key: "docType",
				align: "left",
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.docType'}),
				dataIndex: "docType",
				width: 120,
				render: text => {
					let label = '';
					switch (text) {
						case '0':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.word'});
							break;

						case '1':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.excel'});
							break;

						case '2':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.ppt'});
							break;

						case '3':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.pdf'});
							break;

						case '4':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.txt'});
							break;

						case '5':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.custom'});
							break;

						case '6':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.markdown'});
							break;

						case '7':
							label = formatMessage({id: 'knowledgeFile.fileList.docType.attachment'});
							break;

						default:
							label = '';
							break;
					};
					return label;
				},
				filterDropdown: (filterParam) => {
					const menus = [
						{ key: "4", name: "TXT" },
						{ key: "0", name: "WORD" },
						{ key: "3", name: "PDF" },
						{ key: "2", name: "PPT" },
					];
					return this.renderFilter(filterParam, menus, 'queryType');
				},
			},
			{
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.createTime'}),
				dataIndex: 'createTime',
				key: 'createTime',
				width: 150,
				render: (createTime) => {
					if (createTime) {
						return moment(createTime).format('YYYY-MM-DD');
					} else {
						return createTime;
					}
				}
			},
			{
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.docStatus'}),
				dataIndex: 'docStatus',
				key: 'docStatus',
				width: 120,
				render: docStatus => {
					return docStatus == 1 ? formatMessage({id: 'knowledgeFile.fileList.status.disabled'}) : formatMessage({id: 'knowledgeFile.fileList.status.enabled'})
				},
				filterDropdown: (filterParam) => {
					const menus = [
						{ key: 0, name: formatMessage({id: 'knowledgeFile.fileList.status.enable'}) },
						{ key: 1, name: formatMessage({id: 'knowledgeFile.fileList.status.disable'}) }
					];
					return this.renderFilter(filterParam, menus, 'qaType');
				},
			},
			{
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.syncStatus'}),
				dataIndex: 'syncStatus',
				key: 'syncStatus',
				width: 120,
				render: text => {
					// 同步状态(0: 上传成功/待同步, 1: 上传失败, 2: 同步中, 3: 处理中, 4: 同步成功, 5: 同步失败, 6: 用户取消同步)
					let label = '';
					let color = "#9EA0AA";
					switch (text) {
						case '0':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.pending'});
							break;
						case '1':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.uploadFailed'});
							color = "#E8313B";
							break;
						case '2':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.syncing'});
							color = "#3E5BFF";
							break;
						case '3':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.processing'});
							color = "#3E5BFF";
							break;
						case '4':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.success'});
							color = "#14C6A1";
							break;
						case '5':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.failed'});
							color = "#E8313B";
							break;
						case '6':
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.userCanceled'});
							break;
						default:
							label = formatMessage({id: 'knowledgeFile.fileList.syncStatus.pending'});
							break;
					};
					return <div><span style={{ borderRadius: "50%", width: 6, height: 6, display: "inline-block", background: color, marginRight: 12, verticalAlign: "middle" }}></span>{label}</div>;
				},
				filterDropdown: (filterParam) => {
					const menus = [
						{ key: "2", name: formatMessage({id: 'knowledgeFile.fileList.filter.syncing'}) },
						{ key: "3", name: formatMessage({id: 'knowledgeFile.fileList.filter.processing'}) },
						{ key: "4", name: formatMessage({id: 'knowledgeFile.fileList.filter.success'}) },
						{ key: "5", name: formatMessage({id: 'knowledgeFile.fileList.filter.failed'}) },
						{ key: "6", name: formatMessage({id: 'knowledgeFile.fileList.filter.canceled'}) },
					];
					return this.renderFilter(filterParam, menus, 'status');
				},
			},
			{
				title: formatMessage({id: 'knowledgeFile.fileList.table.columns.operations'}),
				align: "left",
				width: optionDisabled ? 100 : 400,
				render: (text, item) => {
					return (
						<div>
							{UserSession.isSystemKnowledge() || optionDisabled ? (
								<div>
									<Button icon='edit' size="small" type="primary" onClick={() => this.addOrEdit(item.id, item)}>
                    {formatMessage({id: 'knowledgeFile.fileList.button.view'})}
                  </Button>
								</div>
							) : UserSession.isAdmin() ? (
								<div>
									<Button icon='edit' size="small" type="primary" onClick={() => this.addOrEdit(item.id, item)}>
                    {item.docType != 3 ? formatMessage({id: 'knowledgeFile.fileList.button.edit'}) : formatMessage({id: 'knowledgeFile.fileList.button.preview'})}
                  </Button>
									<Button icon='delete' size="small" type="danger" style={{ marginLeft: '16px' }} onClick={() => this.delFile(item.id)}>
                    {formatMessage({id: 'knowledgeFile.fileList.button.delete'})}
                  </Button>
								</div>
							) : (
								<div>
									<Button icon='edit' size="small" type="primary" onClick={() => this.addOrEdit(item.id, item)} disabled={item.docType != 5 && item.syncStatus != '4' && item.docType != 1}>
                    {item.docType != 3 ? formatMessage({id: 'knowledgeFile.fileList.button.edit'}) : formatMessage({id: 'knowledgeFile.fileList.button.preview'})}
                  </Button>
									<Button icon='delete' size="small" type="danger" style={{ marginLeft: '16px' }} onClick={() => this.delFile(item.id)} disabled={item.syncStatus == '3'}>
                    {formatMessage({id: 'knowledgeFile.fileList.button.delete'})}
                  </Button>
									{item.syncStatus == '4' ? (
										<span>
											{item.docStatus == 0 ? (
												<Button size="small" icon="stop" style={{ marginLeft: '16px', backgroundColor: "orange", color: "#fff" }} onClick={() => this.fixStatus(item.id, item)}>
                          {formatMessage({id: 'knowledgeFile.fileList.button.disable'})}
                        </Button>
											) : (
												<Button size="small" icon='caret-right' style={{ marginLeft: '16px', backgroundColor: "#14C6A1", color: "#fff", }} onClick={() => this.fixStatus(item.id, item)}>
                          {formatMessage({id: 'knowledgeFile.fileList.button.enable'})}
                        </Button>
											)}
											<Button size="small" type="primary" style={{ marginLeft: '16px' }} onClick={() => this.postStatus(item.id, item)} disabled={item.syncStatus == '3'}>
												<img src={updateAsync} style={{ verticalAlign: "middle", marginRight: 8 }} />
                        {formatMessage({id: 'knowledgeFile.fileList.button.updateSync'})}
											</Button>
										</span>
									) : item.syncStatus == '2' || item.syncStatus == '3' ? (
										<Button icon="close-circle" size="small" type="danger" style={{ marginLeft: '16px' }} onClick={() => this.postStatus(item.id, item)} disabled={item.syncStatus == '3'}>
                      {formatMessage({id: 'knowledgeFile.fileList.button.cancelSync'})}
                    </Button>
									) : item.syncStatus == '0' ? (
										<Button icon="caret-right" size="small" style={{ marginLeft: '16px', background: "#83D49A", color: "#ffffff" }} onClick={() => this.postStatus(item.id, item)} disabled={item.syncStatus == '3'}>
                      {formatMessage({id: 'knowledgeFile.fileList.button.startSync'})}
                    </Button>
									) : item.syncStatus == '5' || item.syncStatus == '6' ? (
										<Button icon="sync" size="small" style={{ marginLeft: '16px', background: "#558AF6", color: "#ffffff" }} onClick={() => this.postStatus(item.id, item)} disabled={item.syncStatus == '3'}>
                      {formatMessage({id: 'knowledgeFile.fileList.button.resync'})}
                    </Button>
									) : null}
								</div>
							)}
						</div>
					);
				},
			},
		];

		return (
			<Spin spinning={graphLoading}>
				<div className={styles.cardList}>
					<div className="topOptionBox">
						<Input.Search placeholder={formatMessage({id: 'knowledgeFile.fileList.search.placeholder'})} style={{ width: 250 }} allowClear onSearch={value => this.setFormInfoToSearch({ key: value })} />
						{
							optionDisabled ? (
								<Button icon="rollback" onClick={() => history.push({ pathname: isAdmin ? '/publicResource/documentLibrary' : '/documentLibrary', query: {} })}>
                  {formatMessage({id: 'knowledgeFile.fileList.button.backToLibrary'})}
                </Button>
							) : (
								<div>
									<MoreOption menuList={addMenuList} btnInfo={{ name: formatMessage({id: 'knowledgeFile.fileList.button.new'}), style: { marginRight: 8 } }} moreMenuClick={this.moreMenuClick} />
									<MoreOption menuList={batchMenuList} btnInfo={{ name: formatMessage({id: 'knowledgeFile.fileList.button.operations'}), style: { marginRight: 8 } }} moreMenuClick={this.moreMenuClick} />
									<Button icon="rollback" onClick={() => history.push({ pathname: isAdmin ? '/publicResource/documentLibrary' : '/documentLibrary', query: {} })}>
                    {formatMessage({id: 'knowledgeFile.fileList.button.backToLibrary'})}
                  </Button>
								</div>
							)
						}
					</div>
					<Table
						rowSelection={rowSelection}
						dataSource={list}
						columns={columns}
						rowKey="id"
						pagination={false}
						scroll={{ x: "auto", y: 555 }}
					/>
					{parseInt(total) > 10 ? (
						<Pagination
							style={{ textAlign: 'right', marginTop: 16 }}
							onChange={(page) => this.fenye(page)}
							current={current}
							pageSize={10}
							total={parseInt(total)}
							showTotal={total => formatMessage({id: 'knowledgeFile.fileList.pagination.total'}, {total})}
							showQuickJumper={true}
						/>
					) : null}
					<ReferenceTemplate onRef={ref => this.referenceTemplateRef = ref} />
					<UploadFile
						onRef={ref => this.uploadFileRef = ref}
						fileCategoryId={fileCategoryId}
						fileCategoryPath={fileCategoryPath}
						getFileList={this.fenye}
						rootCategoryId={this.props.pathId}
					/>
					<Modal
						title={formatMessage({id: 'knowledgeFile.fileList.modal.moveCategory.title'})}
						onCancel={this.cancelMoveModal}
						visible={moveVisible}
						okText={formatMessage({id: 'knowledgeFile.fileList.modal.moveCategory.okText'})}
						cancelText={formatMessage({id: 'knowledgeFile.fileList.modal.moveCategory.cancelText'})}
						width='464px'
						centered
						onOk={this.doMove}
					>
						<Spin spinning={categoryLoading}>
							<label>{formatMessage({id: 'knowledgeFile.fileList.label.moveToCategory'})}</label>
							<TreeSelect style={{ width: 300, marginLeft: 10 }} value={moveCategoryId} onChange={this.changeCategoryId}>
								{this.renderTreeNodes(treeData)}
							</TreeSelect>
						</Spin>
					</Modal>
				</div>
			</Spin>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(FileList));